<template>
    <div class="SSZ">
        <header>
            <van-nav-bar
            title="我的资料"
            left-arrow
            right-text="保存"
            />
           
            
        </header>

        <section>
             <div class="Stx">
                 <span class="Span">头像</span>
                 <div class="Stx1"></div>
                <span class="Span2"> > </span>
             </div>
             <van-nav-bar title="昵称" class="Snmb">
            </van-nav-bar>
            <van-nav-bar title="性别"  class="Snmb">
            </van-nav-bar>
            <van-nav-bar
            title="我的手机号"
            right-text="156****5850"
            class="Snmb1"
            />
            <van-nav-bar title="我的二维码" class="Snmb2">
            <van-icon name="arrow" slot="right" />
            </van-nav-bar>
            
        </section>

        <footer>
              
        </footer>
    </div>
</template>

<script>
export default {
  data() {
    return {
      checked: '',
    };
  },
  methods:{
      
  }

}

</script>


<style scoped>
*{
    margin: 0;
    padding: 0;
}
.SSZ{
    display: flex;
    height: 100vh;
    flex-direction: column;
    font-size: 0.12rem;
}
.van-nav-bar__text{
    color: #323233;
}
header,footer{
    height:0.8rem; 
}
section{
    flex:1;
    overflow:auto;
}
section .Stx{
    height: 1rem;
    border-bottom: 1px solid #000;
    margin-top: 0.4rem;
}
section .Stx .Span{
    width: 1rem;
    height: 1rem;
    display: block;
    text-align: center;
    line-height: 1rem;
    font-size: 0.37rem;
    float: left;
}
section .Stx .Span2{
    font-size: 0.7rem;
    display: block;
    margin-right: -2.3rem;
    width: 1rem;
    float: right;
}
section .Stx .Stx1{
    width: 1rem;
    height: 1rem;
    border: 0.01rem solid #ccc;
    float:right;
    margin-right: 1rem;
    border-radius: 50%;
}
.Snmb{
    border-bottom: 1px solid #ccc;
}
.Snmb .van-nav-bar__title{
    margin: 0;
    text-align: left;
}
.Snmb1 .van-nav-bar__title{
    margin: 0;
    text-align: left;
}
.Snmb1{
    border-bottom: 0.01rem solid #000;
    
}
.Snmb2 .van-nav-bar__title{
    margin: 0;
    text-align: left;
}
.Snmb2 .van-icon-arrow:before{
    color: #323233;
    font-size: 0.5rem;
}
.Snmb2{
    border-bottom: 0.01rem solid #ccc;
}
</style>


